<template>
  <div class="about">
    <page-search
      :search-form-config="searchFormConfig"
      @searchBtnClick="handleQueryClick"
      @resetBtnClick="handleResetClick"
    />
    <page-content
      ref="pageContentRef"
      :content-table-config="tableConfig"
      pageName="role"
      @editBtnClick="handleEditBtnClick"
      @createBtnClick="handleNewBtnClick"
    ></page-content>

    <page-modal
      ref="pageModalRef"
      pageName="role"
      :modal-config="modalConfig"
      :default-info="defaultInfo"
    >
      <el-tree
        ref="elTreeRef"
        :data="menus"
        show-checkbox
        node-key="id"
        :props="defaultProps"
      />
    </page-modal>
  </div>
</template>

<script>
import { computed, defineComponent, ref } from "vue";

import PageContent from "@/components/page-content";
import PageSearch from "@/components/page-search";
import pageModal from "@/components/page-modal";

import { searchFormConfig } from "./config/search.config.js";
import { tableConfig } from "./config/table.config.js";
import { modalConfig } from "./config/modal.config.js";

import { usePageSearch } from "@/hooks/use-page-search.js";
import { usePageModal } from "@/hooks/use-page-modal.js";

import useLoginStote from "@/store/login.js";

export default defineComponent({
  name: "about",
  components: { PageContent, PageSearch, pageModal },
  setup() {
    const store = useLoginStote();
    const menus = computed(() => store.$state.menus);
    const defaultProps = ref({ children: "children", label: "name" });

    const [pageContentRef, handleQueryClick, handleResetClick] =
      usePageSearch();

    const newCallBack = () => {
      const passwordItem = modalConfig.formItems.find(
        (item) => item.field === "password"
      );
      passwordItem.isHidden = false;
    };
    const editCallBack = () => {
      const passwordItem = modalConfig.formItems.find(
        (item) => item.field === "password"
      );
      passwordItem.isHidden = true;
      //! 非空
    };

    const [pageModalRef, defaultInfo, handleNewBtnClick, handleEditBtnClick] =
      usePageModal(newCallBack, editCallBack);

    return {
      tableConfig,
      searchFormConfig,
      modalConfig,
      pageContentRef,
      handleQueryClick,
      handleResetClick,
      pageModalRef,
      defaultInfo,
      handleNewBtnClick,
      handleEditBtnClick,
      menus,
      defaultProps,
    };
  },
});
</script>
